<script setup>
const model = defineModel();

import "@material/web/list/list-item.js";
import "@material/web/switch/switch.js";
import "@material/web/ripple/ripple.js";
</script>

<template>
  <label class="switch-list-item">
    <md-list-item>
      <div slot="headline" role="presentation">
        <slot name="headline"></slot>
      </div>
      <div slot="supporting-text" role="presentation">
        <slot name="supporting-text"></slot>
      </div>
      <div slot="end" role="presentation" class="switch-item">
        <md-switch icons :selected="model" @change="event => model = event.target.selected"></md-switch>
      </div>
    </md-list-item>
    <md-ripple></md-ripple>
  </label>
</template>

<style scoped>
.switch-list-item {
  user-select: none;
  position: relative;
  cursor: pointer;
}

.switch-list-item .switch-item {
  height: 100%;
}
</style>
